.tabs-button {
  display: flex;
  border-radius: 4px;
  background-color: var(--color-fill-2);
  color: var(--color-text-4);
  height: fit-content;
  padding: 2px;
  .tabs-button-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 4px;
  }
  .active {
    background-color: var(--color-brand-6);
    color: var(--color-text-1);
    font-weight: bold;
  }
  .disabled {
    cursor: not-allowed;
  }
  &.tabs-button--default {
    @include text-12__bold;
    .tabs-button-item {
      padding:1px 8px;
    }
  }

  &.tabs-button--large {
    @include text-16__bold;
    .tabs-button-item {
      padding: 4px 10px;
    }
  }
}
